<template>
  <div class="chuangjianrenqun">
    <div class="kflexc" style="margin-bottom: 20px;">
      <div style="color: rgb(25, 137, 250); cursor: pointer;" @click="fanhui"><< 返回</div>
      <div class="titles">创建人群</div>
    </div>

    <div style="padding:20px 40px;">
      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务名称</div>
        <div class="l2">
          <el-input placeholder="请输入任务名称" v-model="all.title"></el-input>
        </div>
      </div>

      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务类型</div>
        <div class="l2">
          <el-select v-model="all.type_id" placeholder="输入任务类型">
            <el-option :value="item.id" v-for="item in fenleilist" :key="item.id" :label="item.title"></el-option>
          </el-select>
        </div>
        <el-button round @click="guanlileixinglogkai" type="primary" style="margin-left: 20px;" plain>管理类型</el-button>
      </div>

      <div class="kflexc" style="margin-bottom: 20px;">
        <div class="l1">任务说明</div>
        <div class="l2">
          <el-input placeholder="请输入任务说明" v-model="all.remark"></el-input>
        </div>
      </div>

      <div style="background: rgb(249, 249, 249); padding: 20px;">
        <div style="color: rgb(80, 80, 80); font-size: 16px; font-weight: bold; margin-bottom: 20px;">商品信息</div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">商品名称</div>
          <div class="l2">
            <el-select v-model="all.order_page_id" filterable placeholder="输入商品名称">
              <el-option :label="item.title" :value="item.id" v-for="(item,index) in slist" :key="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">号卡归属地</div>
          <div class="l2">
            <!-- <el-cascader @change="guishudi" v-model="guishudi_all" :options="citylist"></el-cascader> -->

            <!-- <el-select @change="handleChangeProvince2" v-model="provinceText2" filterable placeholder="请输入省份名称查询">
              <el-option v-for="item in provinceData" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="cityText2" filterable clearable placeholder="请输入城市名称查询">
              <el-option v-for="item in cityData2" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select> -->

            <dizhi @xuanzhongde="xuanzhongde" :guishudi_code="all.guishudi_code"></dizhi>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">运营商</div>
          <div class="l2">
            <el-select v-model="all.yunyingshang" placeholder="输入运营商">
              <el-option v-for="item in sanlist" :key="item.id" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">套餐内容</div>
          <div class="l2 kflexc zidong">
            <div style="margin-right: 10px;">流量区间</div>
            <el-input placeholder="GB" v-model="all.liuliang_s" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">-</div>
            <el-input placeholder="GB" v-model="all.liuliang_e" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">语音</div>
            <el-input placeholder="分钟" v-model="all.yuyin_s" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">-</div>
            <el-input placeholder="分钟" v-model="all.yuyin_e" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">月租价格</div>
            <el-input placeholder="元" v-model="all.yuezu_s" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">-</div>
            <el-input placeholder="元" v-model="all.yuezu_e" style="width: 60px;margin-right: 10px;"></el-input>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1" style="width:100px;">月租优惠期</div>
          <div class="l2 kflexc zidong">
            <div style="margin-right: 10px;">剩余时间小于等于</div>
            <el-select v-model="all.yuezu_time" placeholder="输入月" style="width: 100px; margin-right: 10px;">
              <el-option :value="item" v-for="item in 36" :key="item" :label="item + '个月'"></el-option>
            </el-select>
            <div style="margin-right: 10px;">到期</div>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1" style="width:100px;">佣金结算周期</div>
          <div class="l2 kflexc zidong">
            <div style="margin-right: 10px;">剩余时间小于等于</div>
            <el-select v-model="all.yongjin_time" placeholder="输入月" style="width: 100px; margin-right: 10px;">
              <el-option :value="item" v-for="item in 36" :key="item" :label="item + '个月'"></el-option>
            </el-select>
            <div style="margin-right: 10px;">到期</div>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1" style="width:100px;">返费周期</div>
          <div class="l2 kflexc zidong">
            <div style="margin-right: 10px;">剩余时间小于等于</div>
            <el-select v-model="all.fanli_time" placeholder="输入月" style="width: 100px; margin-right: 10px;">
              <el-option :value="item" v-for="item in 36" :key="item" :label="item + '个月'"></el-option>
            </el-select>
            <div style="margin-right: 10px;">到期</div>
          </div>
        </div>
      </div>

      <div style="background: rgb(249, 249, 249); padding: 20px; margin-top: 20px;">
        <div style="color: rgb(80, 80, 80); font-size: 16px; font-weight: bold; margin-bottom: 20px;">用户信息</div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">地区</div>
          <div class="l2">
            <el-cascader @change="guishudi2" v-model="address_all" :options="citylist"></el-cascader>
            <!-- <el-select @change="handleChangeProvince" v-model="provinceText" filterable placeholder="请输入省份名称查询">
              <el-option v-for="item in provinceData" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
            <el-select v-model="cityText" filterable clearable placeholder="请输入城市名称查询">
              <el-option v-for="item in cityData" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select> -->
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">性别</div>
          <div class="l2">
            <el-select v-model="all.sex" placeholder="输入性别">
              <el-option :value="1" label="男"></el-option>
              <el-option :value="2" label="女"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">年龄段</div>
          <div class="l2 kflexc zidong">
            <el-input placeholder="" v-model="all.age_s" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">-</div>
            <el-input placeholder="" v-model="all.age_e" style="width: 60px;margin-right: 10px;"></el-input>
          </div>
        </div>
      </div>

      <div style="background: rgb(249, 249, 249); padding: 20px; margin-top: 20px;">
        <div style="color: rgb(80, 80, 80); font-size: 16px; font-weight: bold; margin-bottom: 20px;">行为信息</div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">是否好友</div>
          <div class="l2 kflexc zidong">
            <el-select v-model="all.is_friend" placeholder="是否好友">

              <el-option label="否" :value="1"></el-option>
              <el-option label="是" :value="2"></el-option>

            </el-select>
          </div>
        </div>

        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">添加时间</div>
          <div class="l2">
            <el-date-picker style="width: 400px;" v-model="tianjiashijian" @change="tianjiashijianchange"  value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">下单次数</div>
          <div class="l2 kflexc zidong">
            <el-input placeholder="" v-model="all.order_account_s" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">-</div>
            <el-input placeholder="" v-model="all.order_account_e" style="width: 60px;margin-right: 10px;"></el-input>
          </div>
        </div>
      </div>

      <div style="background: rgb(249, 249, 249); padding: 20px; margin-top: 20px;">
        <div style="color: rgb(80, 80, 80); font-size: 16px; font-weight: bold; margin-bottom: 20px;">订单信息</div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">订单状态</div>
          <div class="l2">
            <el-select v-model="all.order_status" placeholder="输入订单状态">
              <el-option :value="item.value" v-for="item in peizhis.order_status" :key="item.value" :label="item.label"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">激活状态</div>
          <div class="l2">
            <el-select v-model="all.active_status" placeholder="输入激活状态">
              <el-option :value="item.value" v-for="item in peizhis.active_status" :key="item.value" :label="item.label"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">在网状态</div>
          <div class="l2">
            <el-select v-model="all.online_status" placeholder="输入在网状态">
              <el-option :value="1" label="不在网"></el-option>
              <el-option :value="2" label="在网"></el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">退款状态</div>
          <div class="l2">
            <el-select v-model="all.refund_status" placeholder="输入退款状态">
              <!-- <el-option :value="item.value" v-for="item in peizhis.refund_status" :key="item.value" :label="item.label"></el-option> -->
              <el-option label="正常" value="100">正常</el-option>
              <el-option label="退款中" value="200">退款中</el-option>
              <el-option label="退款成功" value="300">退款成功</el-option>
              <el-option label="已支付" value="800">已支付</el-option>
              <el-option label="待支付" value="900">待支付</el-option>
            </el-select>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">订单来源</div>
          <div class="l2">
            <el-select v-model="all.source" filterable placeholder="输入订单来源">
              <el-option :value="item.id" v-for="item in sourceslist" :key="item.id" :label="item.source_name"></el-option>
            </el-select>
            <el-button round @click="goid('/setup/dingdanlaiyuan/dingdanlaiyuan')" type="primary" plain style="margin-left: 20px;">管理来源</el-button>
          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">客单价</div>
          <div class="l2 kflexc zidong">

            <el-input placeholder="" v-model="all.price_s" style="width: 60px;margin-right: 10px;"></el-input>
            <div style="margin-right: 10px;">-</div>
            <el-input placeholder="" v-model="all.price_e" style="width: 60px;margin-right: 10px;"></el-input>

          </div>
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">下单时间</div>
          <div class="l2 kflexc zidong">
            <el-radio v-model="all.time_type" :label="1">绝对时间周期</el-radio>
            <el-radio v-model="all.time_type" :label="2">相对时间周期（实时变化）</el-radio>
            <el-radio v-model="all.time_type" :label="3">最近时间周期（实时变化）</el-radio>
          </div>
          <!-- <div>注：使用订单创建时间计算</div> -->
        </div>
        <div class="kflexc" style="margin-bottom: 20px;">
          <div class="l1">&nbsp;</div>
          <div class="l2">
            <div style="margin-bottom: 20px;" v-if="all.time_type == 1"><el-date-picker style="width: 400px;" v-model="shijianzhouqi" @change="shijianzhouqichange" type="datetimerange"  value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker></div>
            <div class="kflexc zidong" style="margin-bottom: 20px;"  v-if="all.time_type == 2">
              <div style=" margin-right: 10px;">按当前实时时间</div>
              <el-input placeholder="" v-model="all.before_time" style="width: 60px; margin-right: 10px;"></el-input>
              <div style="margin-right: 10px;">天前</div>
              <el-input placeholder="" v-model="all.in_time" style="width: 60px; margin-right: 10px;"></el-input>
              <div style="margin-right: 10px;">天内的订单</div>
            </div>
            <div class="kflexc zidong" style="margin-bottom: 20px;"  v-if="all.time_type == 3">
              <div style=" margin-right: 10px;">最近</div>
              <el-input placeholder="" v-model="all.near_time" style="width: 60px; margin-right: 10px;"></el-input>
              <div style="margin-right: 10px;">天内的订单</div>
            </div>
          </div>
        </div>
      </div>
      <div style="margin-top: 20px;">
        <el-button round @click="chuangjian" :disabled="ing" type="danger" plain>确定创建</el-button>
      </div>
    </div>
    <guanlileixing ref="guanlileixing" @gengxin="gengxin" v-if="guanlileixinglog"></guanlileixing>

  </div>
</template>

<script>

  import peizhis from '../../assets/peizhi.js'
  import {
  	provinceAndCityDataPlus,provinceAndCityData,
  	CodeToText,
  	TextToCode
  } from 'element-china-area-data'
  import axios from "axios";
  import guanlileixing from './zujian/guanlileixing'
  import dizhi from './zujian/dizhi'
  export default {
    name: 'chuangjianrenqun',
    components: {
      "guanlileixing": guanlileixing,
      dizhi
    },
    data() {
      return {
        ing:false,
        search:{},
        list:"",
        jieguo:{
          name:"人群短信通知结果",
          log:false,
          list:""
        },
        all:{
          type:"",
          time_type:1
        },
        tableData:"",
        qianminglist:"",
        guanlileixinglog:false,
        fenleilist:"",
        slist:"",
        citylist: provinceAndCityData,
        sanlist: [
         //  {name: "中国联通",	id: 10010},
        	// {name: "中国移动",id: 10086},
        	// {name: "中国电信",id: 10000},
          {name: "中国广电",id: 10099},
          // {name: "虚拟运营商",id: 11111}
        ],
        tianjiashijian:[],
        shijianzhouqi:[],
        sourceslist:[],

        address_all:"",
        // guishudi_all:"",

        // provinceData: provinceAndCityData,
        // cityData: [],
        // cityData2: [],
        // provinceText: '',
        // cityText: '',
        // provinceText2: '',
        // cityText2: '',
      }
    },
    created() {
      if(this.$route.query.id){
        this.getinfo()
      }
      this.getlist2()
      this.getsign()
      this.gengxin()

    },
    mounted() {
      this.citylist.forEach(item=>{
        if(item.label == '北京市'){
          item.children.forEach(item=>{
            item.label = '北京市'
          })
        }
        if(item.label == '上海市'){
          item.children.forEach(item=>{
            item.label = '上海市'
          })
        }
        if(item.label == '重庆市'){
          item.children.forEach(item=>{
            item.label = '重庆市'
          })
        }
        if(item.label == '天津市'){
          item.children.forEach(item=>{
            item.label = '天津市'
          })
        }
      })
    },
    methods:{


      xuanzhongde:function(item){
        this.all.guishudi = item.zi
        this.all.guishudi_code = item.shu
        // this.all.province = item
      },
      // handleChangeProvince(value) {
      //       this.cityData = []
      //       this.cityText = ''
      //       const province = CodeToText[value]
      //       if (province === '北京市' || province === '天津市' || province === '上海市' || province === '重庆市' ||
      //         province === '香港特别行政区' || province === '澳门特别行政区') {
      //         const city = { value: value, label: province }
      //         this.cityData.push(city)
      //       } else {
      //         const childList = this.provinceData.find(i => i.value === value).children
      //         this.cityData.push(...childList)
      //       }
      //       console.log(this.provinceText,this.cityText)
      // },

      // handleChangeProvince2(value) {
      //       this.cityData2 = []
      //       this.cityText2 = ''
      //       const province = CodeToText[value]
      //       if (province === '北京市' || province === '天津市' || province === '上海市' || province === '重庆市' ||
      //         province === '香港特别行政区' || province === '澳门特别行政区') {
      //         const city = { value: value, label: province }
      //         this.cityData2.push(city)
      //       } else {
      //         const childList = this.provinceData.find(i => i.value === value).children
      //         this.cityData2.push(...childList)
      //       }
      //       console.log(this.provinceText2,this.cityText2)
      // },

      fanhui:function(){
        this.$router.go(-1)
      },

      getinfo:function(){
        axios.get("/api/plan-market/crowd/info?id="+this.$route.query.id)
          .then( response => {
            if (response.data.msg.code == 0) {
              this.all = response.data.data

              // var city = []

              // if(this.all.guishudi_province){
              // 	city.push(TextToCode[this.all.guishudi_province].code)

              //   if(this.all.guishudi_city){
              //   	city.push(TextToCode[this.all.guishudi_province][this.all.guishudi_city].code)
              //   }
              // }

              // this.guishudi_all = city

              var city2 = []
              if(this.all.address_province){
              	city2.push(TextToCode[this.all.address_province].code)

                if(this.all.address_city){

                  if(this.all.address_city == '北京市'){
                    this.all.address_city = '市辖区'
                  }
                  if(this.all.address_city == '上海市'){
                    this.all.address_city = '市辖区'
                  }
                  if(this.all.address_city == '天津市'){
                    this.all.address_city = '市辖区'
                  }
                  if(this.all.address_city == '重庆市'){
                    this.all.address_city = '市辖区'
                  }
                  console.log(this.all.address_province,this.all.address_city)
                	city2.push(TextToCode[this.all.address_province][this.all.address_city].code)
                }
              }

              this.address_all = city2

              // //归属地
              // if(this.all.guishudi_province){
              // 	 this.provinceText2 = TextToCode[this.all.guishudi_province].code
              //    this.handleChangeProvince2(this.provinceText2)
              // }
              // if(this.all.guishudi_city){
              // 	this.cityText2 = TextToCode[this.all.guishudi_province][this.all.guishudi_city].code
              // }
              // //用户地址
              // if(this.all.address_province && this.all.address_province != '全部'){
              // 	 this.provinceText = TextToCode[this.all.address_province].code
              //    this.handleChangeProvince(this.provinceText)
              // }
              // if(this.all.address_city){
              // 	this.cityText = TextToCode[this.all.address_province][this.all.address_city].code
              // }



              if(this.all.add_friend_time_s && this.all.add_friend_time_e){
                this.tianjiashijian = [this.all.add_friend_time_s,this.all.add_friend_time_e]
              }
              if(this.all.time_s && this.all.time_e){
                this.shijianzhouqi = [this.all.time_s,this.all.time_e]
              }
              if(this.all.order_status == null){
                this.all.order_status = ""
              }
              if(this.all.active_status == null){
                this.all.active_status = ""
              }
              if(this.all.refund_status == null){
                this.all.refund_status = ""
              }
              this.all.order_status = this.all.order_status.toString()
              this.all.active_status = this.all.active_status.toString()
              this.all.refund_status = this.all.refund_status.toString()
              this.all.source =  this.all.source * 1
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      shijianzhouqichange:function(val){
        console.log(val)
        if(val){
          this.all.time_s = val[0]
          this.all.time_e = val[1]
        }else{
          this.all.time_s = ''
          this.all.time_e = ''
        }
      },
      tianjiashijianchange:function(val){
        console.log(val)
        if(val){
          this.all.add_friend_time_s = val[0]
          this.all.add_friend_time_e = val[1]
        }else{
          this.all.add_friend_time_s = ''
          this.all.add_friend_time_e = ''
        }
      },
      //商品归属地
      // guishudi:function(val){
      //   console.log(val)
      //   if(!val[0]){
      //     this.all.guishudi_province = ''
      //     this.all.guishudi_city = ''
      //   }else{
      //     this.all.guishudi_province = CodeToText[val[0]]
      //   }
      //   if(!val[1]){
      //     this.all.guishudi_city = ''
      //   }else{
      //     this.all.guishudi_city = CodeToText[val[1]]
      //   }
      // },
      //用户归属地
      guishudi2:function(val){
        console.log(val)
        if(!val[0]){
          this.all.address_province = ''
          this.all.address_city = ''
        }else{
          this.all.address_province = CodeToText[val[0]]
        }

        if(!val[1]){
          this.all.address_city = ''
        }else{
          this.all.address_city = CodeToText[val[1]]
        }

        if(this.all.address_province == '北京市'){
          this.all.address_city = '北京市'
        }
        if(this.all.address_province == '天津市'){
          this.all.address_city = '天津市'
        }
        if(this.all.address_province == '上海市'){
          this.all.address_city = '上海市'
        }
        if(this.all.address_province == '重庆市'){
          this.all.address_city = '重庆市'
        }

      },

      chuangjian:function(){
        this.ing = true

//         this.all.guishudi_province = CodeToText[this.provinceText2]
//         this.all.guishudi_city = CodeToText[this.cityText2]

//         this.all.address_province = CodeToText[this.provinceText]
//         this.all.address_city = CodeToText[this.cityText]
// console.log(this.cityText,this.all.address_city )

        axios.post("/api/plan-market/crowd/add",this.all)
          .then( response => {
            if (response.data.msg.code == 0) {
              this.$message.success('创建成功');
              setTimeout(()=>{
                this.ing = false
              },500)
              this.$router.go(-1)
            } else {
              this.$message.error(response.data.msg.info);
              setTimeout(()=>{
                this.ing = false
              },500)
            }
          })
      },
      gengxin:function(){
        axios.get("/api/plan-market/crowd/type/list")
          .then( response => {
            if (response.data.msg.code == 0) {
              this.fenleilist = response.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      guanlileixinglogkai:function(){
        this.guanlileixinglog = true
        this.$nextTick(()=>{
          this.$refs.guanlileixing.log = true
        })
      },
      search:function(){

      },
      getlist:function(){

      },
      //获取全部
      getlist2:function() {
        var that = this
        axios.get('/api/plan-market/message/formwork/list?flag=1&type=' + this.all.type)
          .then(response => {
            if (response.data.msg.code == 0) {
              this.tableData = response.data.data
              this.all.formwork_id = ''
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      //获取签名
      getsign:function(){
          var that = this;
          axios.get('/api/plan-market/message/getsign')
          		.then(response => {
          			if(response.data.msg.code == 0){
          				this.qianminglist = response.data.data
                  if(this.qianminglist == ''){
                    this.renwu.sign = ''
                  }
          			}else{
          				this.$message.error(response.data.msg.info);
          			}
          		})
          axios.get('/api/plan-market/all-pages')
            .then(response => {
              if (response.data.msg.code == 0) {
                this.slist = response.data.data
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
          axios.get('/api/form/channel/sources')
            .then(response => {
              if (response.data.msg.code == 0) {
                this.sourceslist = response.data.data
              } else {
                this.$message.error(response.data.msg.info);
              }
            })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .chuangjianrenqun{ padding: 20px;
    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: #fff;  border: 0; width: 250px; border: 1px #eaeaea solid;}
    /deep/ .zidong .el-input__inner{ width: 100%;}
    /deep/ .el-date-editor .el-range-input{  }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .titles{ font-size: 20px; font-weight: bold; font-family: '微软雅黑'; margin-left: 20px;}
    .l1{ font-size: 14px; color: rgb(51, 51, 51); width: 80px;  text-align: right; margin-right: 20px;}
    .l2{ font-size: 14px; color: rgb(130, 130, 130);}
  }
</style>
